var player;
var videoElement
var videomarkers

window.addEventListener('message', function(event) {
    // 检查消息来源是否可信
    // event.origin 可以用来验证消息的来源
    
    if (event.data && event.data.type === 'videomark') {
        // 处理接收到的消息

        videomarkers = event.data.data;
        

        player = new Plyr('#player');
        
        // 监听 Plyr 播放器的 ready 事件
        player.on('ready', event => {

            console.log(videomarkers)

            

            // 监听 Plyr 播放器的 progress 事件
            player.on('progress', event => {
                // 获取进度条的 DOM 元素
                const progressElement = player.elements.progress;
        
                console.log(videomarkers)
                // 清空之前的标记点
                progressElement.querySelectorAll('.marker').forEach(marker => marker.remove());
        
                // 计算进度条的宽度
                const progressWidth = progressElement.offsetWidth;
        
                // 遍历所有的标记点
                videomarkers.forEach(marker => {
                    // 计算标记点在进度条上的位置
                    const markerPosition = (marker.time / player.duration) * progressWidth;
        
                    // 创建标记点的 DOM 元素
                    const markerElement = document.createElement('div');
        
                    markerElement.classList.add('marker');
                    markerElement.style.left = `${markerPosition}px`;
                    markerElement.title = marker.text;
        
                    markerElement.addEventListener("click",function(){
                        videoElement.currentTime = marker.time;
                    })
                    // 添加鼠标悬停事件监听器
                    markerElement.addEventListener('mouseover', () => {
                        // 创建标题元素
                        const titleElement = document.createElement('div');
                        titleElement.classList.add('marker-title');
                        titleElement.textContent = marker.text;
                        // 将标题元素添加到标记点元素中
                        markerElement.appendChild(titleElement);
                    });
        
                    // 移除鼠标悬停事件监听器
                    markerElement.addEventListener('mouseout', () => {
                        // 移除标题元素
                        const titleElement = markerElement.querySelector('.marker-title');
                        if (titleElement) {
                            titleElement.remove();
                        }
                    });
        
                    // 将标记点添加到进度条上
                    progressElement.appendChild(markerElement);
                });
            });
        });

    }

    if (event.data && event.data.type === 'videomark-ing') { // 监听特定的键值

        videomarkers = event.data.data;
     
        var player = new Plyr('#player');

        // 定义标记点的时间点和对应的文本
        
        // 监听 Plyr 播放器的 ready 事件
        player.on('ready', event => {
            // 监听 Plyr 播放器的 progress 事件
           
                // 获取进度条的 DOM 元素
                const progressElement = player.elements.progress;
        
                // 清空之前的标记点
                progressElement.querySelectorAll('.marker').forEach(marker => marker.remove());
        
                // 计算进度条的宽度
                const progressWidth = progressElement.offsetWidth;
        
                // 遍历所有的标记点
                videomarkers.forEach(marker => {
                    // 计算标记点在进度条上的位置
                    const markerPosition = (marker.time / player.duration) * progressWidth;
        
                    // 创建标记点的 DOM 元素
                    const markerElement = document.createElement('div');
        
                    markerElement.classList.add('marker');
                    markerElement.style.left = `${markerPosition}px`;
                    markerElement.title = marker.text;
        
                    markerElement.addEventListener("click",function(){
                        videoElement.currentTime = marker.time;
                    })
                    // 添加鼠标悬停事件监听器
                    markerElement.addEventListener('mouseover', () => {
                        // 创建标题元素
                        const titleElement = document.createElement('div');
                        titleElement.classList.add('marker-title');
                        titleElement.textContent = marker.text;
                        // 将标题元素添加到标记点元素中
                        markerElement.appendChild(titleElement);
                    });
        
                    // 移除鼠标悬停事件监听器
                    markerElement.addEventListener('mouseout', () => {
                        // 移除标题元素
                        const titleElement = markerElement.querySelector('.marker-title');
                        if (titleElement) {
                            titleElement.remove();
                        }
                    });
        
                    // 将标记点添加到进度条上
                    progressElement.appendChild(markerElement);
                });
            });
        
    }
        
});

window.addEventListener('storage', function(event) {

    console.log(event.key)
    if (event.key === 'jumpTime') { // 监听特定的键值

        let time = JSON.parse(event.newValue)

        console.log("跳转时间:" + time)

        var video = videoElement
     
        video.currentTime = time
    }
    

    // if (event.key === 'videomarker') { // 监听特定的键值

    //     videomarkers = JSON.parse(localStorage.getItem('videomarker'));
     
    //     player = new Plyr('#player');

    //     // 定义标记点的时间点和对应的文本
        
    //     // 监听 Plyr 播放器的 ready 事件
    //     player.on('ready', event => {
    //         // 监听 Plyr 播放器的 progress 事件
    //         player.on('progress', event => {
    //             // 获取进度条的 DOM 元素
    //             const progressElement = player.elements.progress;
        
    //             // 清空之前的标记点
    //             progressElement.querySelectorAll('.marker').forEach(marker => marker.remove());
        
    //             // 计算进度条的宽度
    //             const progressWidth = progressElement.offsetWidth;
        
    //             // 遍历所有的标记点
    //             videomarkers.forEach(marker => {
    //                 // 计算标记点在进度条上的位置
    //                 const markerPosition = (marker.time / player.duration) * progressWidth;
        
    //                 // 创建标记点的 DOM 元素
    //                 const markerElement = document.createElement('div');
        
    //                 markerElement.classList.add('marker');
    //                 markerElement.style.left = `${markerPosition}px`;
    //                 markerElement.title = marker.text;
        
    //                 markerElement.addEventListener("click",function(){
    //                     videoElement.currentTime = marker.time;
    //                 })
    //                 // 添加鼠标悬停事件监听器
    //                 markerElement.addEventListener('mouseover', () => {
    //                     // 创建标题元素
    //                     const titleElement = document.createElement('div');
    //                     titleElement.classList.add('marker-title');
    //                     titleElement.textContent = marker.text;
    //                     // 将标题元素添加到标记点元素中
    //                     markerElement.appendChild(titleElement);
    //                 });
        
    //                 // 移除鼠标悬停事件监听器
    //                 markerElement.addEventListener('mouseout', () => {
    //                     // 移除标题元素
    //                     const titleElement = markerElement.querySelector('.marker-title');
    //                     if (titleElement) {
    //                         titleElement.remove();
    //                     }
    //                 });
        
    //                 // 将标记点添加到进度条上
    //                 progressElement.appendChild(markerElement);
    //             });
    //         });
    //     });
        
        

    


    //     // player.seek(JSON.parse(event.newValue));
    // }
});

document.addEventListener("DOMContentLoaded",function(){
    
    // 解析 URL 参数，获取视频链接
    var urlParams = new URLSearchParams(window.location.search);
    var videoSrc = urlParams.get('videoSrc');


    let videoContainer = document.getElementById("video-player");

    // 创建 video 元素
    videoElement = document.createElement('video');
    videoElement.setAttribute('id', 'player');
    videoElement.setAttribute('controls', '');
    videoElement.setAttribute('autoplay', ''); // 添加 autoplay 属性


    videoElement.style.width = videoContainer.offsetWidth + 'px';
    videoElement.style.height = videoContainer.offsetHeight + 'px';
    // 创建 source 元素
    var sourceElement = document.createElement('source');
    sourceElement.setAttribute('src', videoSrc);
    sourceElement.setAttribute('type', 'video/mp4');

    // 将 source 元素附加到 video 元素中
    videoElement.appendChild(sourceElement);

    // 将 video 元素附加到文档的某个父元素中
    videoContainer.appendChild(videoElement);

})